<template>
  <div v-loading="loading">
    <div class="title">
      <span>货单明细详情</span>
      <div>
          <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>

    <div class="container">
      <div class="itemBox">
          <div class="line">
          <div>货单编号</div>
          <div>{{info.manifestNo}}</div>
          </div>
          <div class="line">
          <div>接收方姓名</div>
          <div>{{info.customerName}}</div>
          </div>
          <div class="line">
          <div>接收方手机号</div>
          <div>{{info.customerPhone}}</div>
          </div>
          <div class="line">
          <div>货单描述</div>
          <div>{{info.attach}}</div>
          </div>
          <div class="line">
          <div>创建时间</div>
          <div>{{info.createTime}}</div>
          </div>
      </div>
      <div class="itemBox">
          <div class="line">
          <div>商户名称</div>
          <div>{{info.merchantName}}</div>
          </div>
          <div class="line">
          <div>接收方姓名</div>
          <div>{{info.merchantNo}}</div>
          </div>
          <div class="line">
          <div>应付金额</div>
          <div>{{info.totalAmount / 100}}</div>
          </div>
          <div class="line">
          <div>已付金额</div>
          <div>{{info.paidAmount / 100}}</div>
          </div>
          <div class="line">
          <div>未付金额</div>
          <div>{{info.payableAmount / 100}}</div>
          </div>
      </div>

      <!-- 表格板块 -->
      <div class="tableBox" v-if="orderData.length > 0">
          <el-table
              ref="multipleTable"
              :data="orderData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              stripe
              v-loading="loading"
              :header-cell-style="tableHeaderColor">
          <el-table-column type="selection" width="55"></el-table-column>
      
          <el-table-column
              prop="tradeDate"
              label="交易时间?订单号"
              align="center"
              :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.settleTime }}</div>
              <div>{{ scope.row.outTradeNo }}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="merchantNo"
              label="订单金额(元)?支付状态"
              align="center"
              :render-header="renderheader"
          >
          <template slot-scope="scope">
              <div>{{ scope.row.totalFee / 100 }}</div>
              <div>
                <span
                  v-if="scope.row.payStatusCode == 1"
                  class="green"
                  :class="[scope.row.refundStatus == '01' ? 'blue' : '']"
                  >{{ scope.row.payStatusMsg }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 2 ||
                    scope.row.payStatusCode == 6 ||
                    scope.row.payStatusCode == 4
                  "
                  class="hui"
                  >{{ scope.row.payStatusMsg }}</span
                >
                <span v-else-if="scope.row.payStatusCode == 3" class="orange">{{
                  scope.row.payStatusMsg
                }}</span>
                <span v-else-if="scope.row.payStatusCode == 5" class="reds">{{
                  scope.row.payStatusMsg
                }}</span>
                <span
                  v-else-if="
                    scope.row.payStatusCode == 8 ||
                    scope.row.payStatusCode == 13 ||
                    scope.row.payStatusCode == 8
                  "
                  class="orange"
                  >{{ scope.row.payStatusMsg }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 11 && scope.row.refundStatus == 3
                  "
                  class="cyan"
                  >{{ scope.row.payStatusMsg }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 11 && scope.row.refundStatus == 4
                  "
                  class="yellow"
                  >{{ scope.row.payStatusMsg }}</span
                >
                <span
                  v-else-if="
                    scope.row.payStatusCode == 11 &&
                    scope.row.refundStatus == ''
                  "
                  class="green"
                  >{{ scope.row.payStatusMsg }}</span
                >
                <span v-else-if="scope.row.payStatusCode == 15" class="reds">{{
                  scope.row.payStatusMsg
                }}</span>
                <span v-else class="blue">{{
                  scope.row.payStatusMsg
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="totalFee"
              label="实收金额"
              align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.totalFee / 100 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="merchantNo"
            label="商户号"
            align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.merchantNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="
                  goOrderDetail(scope.row.outTradeNo, scope.row.payStatusCode)
                "
                >详情</el-button
              >
            
            </template>
          </el-table-column>
      </el-table>
      <div class="pagination">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-sizes="[10,20,30,40,50]"
          :page-size='cur_size'
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import { maniaccountDetail, maniaOrderList } from "@/api/maniaccount/maniaccount";
import { queryorder } from "@/api/api";
export default {
  name: 'maniaccountdetail',

  data() {
    return {
      loading: false,
      info: {},
      cur_page: 1,
      cur_size: 10,
      total: 0,
      orderData: []
    };
  },

  created() {
    this.loading = true
    this.getManiDetailFn(JSON.parse(this.$route.query.id))
    this.getManiaOrderList(JSON.parse(this.$route.query.id))
  },

  watch: {
    // 监听路由传参变化
    async $route(item) {
        if(item.path == '/maniaccountdetail') {
        this.getManiDetailFn(item.query.id)
        this.getManiaOrderList(item.query.id)
      }
    }
  },

  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
        }
    },
    // 分页导航
    handleCurrentChange(val) {
        this.cur_page = val;
        this.$nextTick(() => {
            document.querySelectorAll(".content")[0].scrollTop = "0";
        });
    },
    // 分页数量
    sizechange(val) {
        this.cur_size = val;
        this.$nextTick(() => {
            document.querySelectorAll(".content")[0].scrollTop = "0";
        });
    },
    //多选框
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },

    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
      ]);
    },

    // 刷新
    refresh() {
      this.getManiCount()
    },

    // 获取货单详情
    async getManiDetailFn() {
      let res = await maniaccountDetail(JSON.parse(this.$route.query.id))
      if(res.code == 405) {
        this.loading = false
        localStorage.removeItem('token')
        this.$router.push('/login');
      } else {
        if(res.code == 200) {
          this.info = res.data
          this.loading = false
        } else {
          this.loading = false
          this.$message.error(res.message)
        }
      }
    },

    // 获取货单订单交易列表
    async getManiaOrderList(id) {
      let res = await maniaOrderList({
        manifestId: id,
        page: this.cur_page,
        size: this.cur_size,
      })
      if(res.code == 405) {
        this.loading = false
        localStorage.removeItem('token')
        this.$router.push('/login');
      } else {
        if(res.code == 200) {
          console.log(res);
          this.orderData = res.data
          this.total = res.pageInfo.recordCount
          this.cur_page = res.pageInfo.pageCurrent
          this.cur_size = res.pageInfo.pageSize
          this.loading = false
        } else {
          this.loading = false
          this.$message.error(res.message)
        }
      }
    },

    // 订单详情跳转
    goOrderDetail(val, code) {
      if (code == 2 || code == 3 || code == 4 || code == 6 || code == 8) {
        queryorder({}, val).then((res) => {
          // console.log(res);
          // if(res.code == 405){
          // sessionStorage. removeItem('token')
          //   this.$router.push('/login');
          // }else{
          // }
        });
      }
      // console.log(val)
      this.$router.push({
        path: "/indentdetails",
        query: {
          code: val,
        },
      });
    }
  },
};
</script>

<style lang="less" scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.container .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .attachmentitem {
    width: 16.5%;
    text-align: center;
    margin-bottom: 20px;
    div {
      font-size: 14px;
      &:nth-child(1) {
        margin-bottom: 5px;
      }
    }
  }
  .tableBox{
    width: 100%;
    margin-top: 20px;
  }
  .splitBox {
    width: 100%;
    margin: 20px 0 10px 0;
  }
  // /deep/.feeMerchant .el-table__row {
  //   cursor: pointer;
  // }
}
.yuan {
  color: #c1c5cb;
  font-size: 12px;
  position: relative;
  left: -20px;
}
.green {
  background: #97c05c;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.orange {
  background: #f29c38;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.hui {
  background: #888888;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.reds {
  background: #d3362f;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.blue {
  background: #4154af !important;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.cyan {
  background: rgba(1, 255, 255) !important;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.yellow {
  background: #ffe793 !important;
  color: #000;
  padding: 0 5px;
  border-radius: 10px;
}
</style>